<template>
	<u-navbar :is-back="false" :is-fixed="true" :background="{background:'#ffffff'}" :border-bottom="false">
		<view class="u-flex top-box">
			<view class="u-flex-1">
				<u-search bg-color="#F6F6F6" @clear="searchClear(['name'])" @search="searchConfirm" @custom="searchConfirm" v-model.trim="searchParams.name" :show-action="false" placeholder="请输入关键词" :clearabled="true"></u-search>
			</view>
		</view>
	</u-navbar>
	<view class="u-skeleton">
		<view class="u-p-20" v-if="list.length">
			<u-row gutter="22">
				<u-col span="6" v-for="v in list">
					<good-item :detail="v"></good-item>
					<u-gap height="20"></u-gap>
				</u-col>
			</u-row>
		</view>
		<view class="u-p-20" v-if="skeletonList.length">
			<u-row gutter="22">
				<u-col span="6" v-for="v in skeletonList">
					<view class="good-item">
						<view class="good-item-img-wrap u-skeleton-fillet">
							<image src="/static/images/icon-index-list.png" mode="aspectFill"></image>
						</view>
						<view class="u-p-20">
							<view class=" u-skeleton-rect">标题</view>
							<view class=" u-m-t-10 u-skeleton-rect">￥</view>
						</view>
					</view>
					<u-gap height="20"></u-gap>
				</u-col>
			</u-row>
		</view>
		<g-loadmore :status="loadmoreStatus"></g-loadmore>
		<u-gap height="20"></u-gap>
	</view>
	<u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#F9F9F9"></u-skeleton>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store

	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch
	} from 'vue'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy;
	const {
		nav,
		navLogin
	} = proxy.$util;
	import {
		onReady,
		onLoad,
		onShow,
		onPageScroll,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import mixins from '@/common/js/mixins.js';
	const {
		shareAppMessage
	} = mixins();
	import mixinList from '@/common/js/mixinList.js';
	const {
		total,
		current_page,
		page_size,
		last_page,
		apiPath,
		loading,
		list,
		searchParams,
		getList,
		getNextList,
		loadmoreStatus,
		searchClear,
		searchConfirm
	} = mixinList();

	const skeletonLoading = ref(true)
	const skeletonList = ref([1, 2,3,4])
	watch(loadmoreStatus, (newV) => {
		if (newV != 'loading') {
			skeletonLoading.value = false;
			skeletonList.value = []
		}
	})
	apiPath.value = 'getProduct'
	searchParams.type = 0
	searchParams.productStatus = 1
	

	onReady(() => {
		
	})
	onLoad(async (d) => {
		getList(1);
	})
	onShow(async () => {
		// store.commit('set_userRole', 'user')
	})
	onPageScroll(e => {

	})
</script>

<style scoped lang="scss">
	.top-box {
		display: flex;
		align-items: center;
		padding: 0 14px;
		width: 100%;
	}

</style>